<!--
 * @Author: qyu qyu@deloitte.com.cn
 * @Date: 2023-06-06 09:57:01
 * @LastEditors: qyu qyu@deloitte.com.cn
 * @LastEditTime: 2023-06-08 10:53:32
 * @FilePath: \adapter-screen\src\components\DynamicComponent.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_email}, All Rights Reserved. 
-->
<template>
  <component :is="dynamicComponent" v-if="dynamicComponent" :scope="scope" />
</template>

<script setup lang="ts" name="DynamicComponent">
  import { defineAsyncComponent, watch, onMounted } from 'vue'
  const props = defineProps({
    path: {
      type: String,
      required: true
    },
    scope: {
      type: Object,
      default: () => ({})
    }
  })

  let dynamicComponent: any

  onMounted(() => {
    if (props.path.lastIndexOf('.vue')) {
      dynamicComponent = defineAsyncComponent(() => import(/* @vite-ignore */ props.path))
    }
  })

  watch(
    () => props.path,
    (val) => {
      if (val.lastIndexOf('.vue')) {
        dynamicComponent = defineAsyncComponent(() => import(/* @vite-ignore */ props.path))
      }
    }
  )
</script>

<style scoped></style>
